<template>
	<van-row>
		<van-col span="6">
			<van-sticky :offset-top="50">
				<van-sidebar  v-model="activeKey">
					<van-sidebar-item v-for="(item, i) in categoryList" :key="i" class="van-ellipsis"
					:title="item.name"
					@click="onClickLeftMenus(item.id)" />
				</van-sidebar>
			</van-sticky>
		</van-col>
		<van-col span="18">
			<!-- 下拉刷新组件 -->
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<!-- 列表组件 -->
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
					:immediate-check="false" :offset="0">
					<!-- 商品卡片列表 -->
					<van-card v-for="(item,i) in productList" :key="i" :num="item.sold_count" :price="item.price"
						:desc="item.spec" :title="item.title" 
						:thumb="APIDomainName + item.pic" 
						@click="onDetail(item.id)" />
				</van-list>
			</van-pull-refresh>
		</van-col>
	</van-row>
</template>
<script>
	import defaultImage from '@/assets/images/avator.jpeg'
	//1.导入封装后的接口  
	import {
		getProductListAPI
	} from "@/api/product.js";
	import {
		getCategoryAPI
	} from "@/api/category.js";
	export default {
		data() {
			return {
				productList: [],
				categoryList: [], //类别菜单名称列表，注意其数据结构
				category_id: null,
				activeKey: 0,
				defaultImage,
				//分页
				pageIndex: 1, //页码  
				pageSize: 10, //页大小      
				pageTotal: 0, //总页数
				//上拉加载状态控制变量
				// List有以下三种状态，理解这些状态有助于你正确地使用List组件：      
				// 非加载中，loading为false，此时会根据列表滚动位置判断是否触发onload事件（列表内容不足一屏幕时，会直接触发）。        
				// 加载中，loading为true，表示正在发送异步请求，此时不会触发onload事件。        
				// 加载完成，finished为true，此时不会触发onload事件 在每次请求完毕后，需要手动将loading设置为false，表示加载结束。
				loading: false,
				finished: false,
				//下拉刷新状态控制变量
				refreshing: false,
			}
		},
		//生命周期钩子函数,当实例创建好了后被调用,
		created() {
			// 获取左侧导航的分类内容
			getCategoryAPI().then(result => {
				// console.log(result); //调式输出，看数据结构
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id;
				// this.onLoad();
				this.onRefresh()
			});
		},
		methods: {
			//点击左侧分类
			onClickLeftMenus(category_id) {
				this.category_id = category_id;
				this.productList = []; //清空
				this.onRefresh();
			},
			// 上拉加载每次1页
			onLoad() {
				// 异步更新数据
				this.pageIndex += 1; //页码递增
				let category_id = this.category_id; //商品分类id
				let pageIndex = this.pageIndex;
				let pageSize = this.pageSize; //页大小      
				getProductListAPI({
					category_id,
					pageIndex,
					pageSize
				}).then((result) => {
					console.log(result); //调式输出，看数据结构
					this.pageTotal = result.pageTotal; //总页数
					//如果是正在下拉刷新中
					if (this.refreshing) {
						this.productList = []; //清空
						this.refreshing = false;
					}
					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data); //数据拼接
					}
					// 设置本次上拉加载状态结束
					this.loading = false;
					// 判断是否数据全部加载完成
					if (this.pageIndex > this.pageTotal) {
						this.finished = true;
					}
				});
			},
			// 下拉刷新
			onRefresh() {
				this.pageIndex = 0; //重置页码        
				this.finished = false; //重置上拉加载未完成
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},
			//点击右侧商品导航到商品详情
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	.van-sidebar {
		width: 120px;

		.van-sidebar-item {
			padding: 10px;
		}
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
	//样式穿透
	/deep/.van-sidebar-item__text{
			text-overflow:ellipsis;
			overflow: hidden;
			width: 100%;
	}
	/deep/.van-sticky--fixed{
		z-index: -1;
	}
	/deep/.van-sidebar {
		width: 100px;
	}
</style>